<template>
	<view class="template-create tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="true">
			超级搜索
		</tn-nav-bar>


		<view class="tn-safe-area-inset-bottom " :style="{paddingTop: vuex_custom_bar_height + 'px'}">

    
	
			<view class="about-shadow  tn-margin">
				
				<view class="tn-search-fixed tn-bg-white tn-padding-top">
				    <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin" >
				      <view class="justify-content-item align-content-item">
				        <view class="tn-bg-gray--light tn-flex tn-flex-col-center" style="border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 100%;">
				          <text class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
				          <input class="justify-content-item" placeholder="输入对方ID号或昵称" v-model="searchKey" placeholder-style="color:#AAAAAA" ></input>
				        </view>
				      </view>
				      
				      <view class="align-content-item">
				        <view class="justify-content-item tn-text-center" @click="sousuo_id()">
				          <tn-button  :shadow="true" backgroundColor="tn-main-gradient-purple"   shape="round" padding="20rpx 20rpx" width="150rpx" shadow fontBold >
				            <text >搜索</text>
				          </tn-button>
							
				        </view>
				      </view>
				    </view>
				  </view>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="nianlingshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">年龄</view>
						<view class="tn-color-gray ">
							{{nianlingtitle}}
						</view>
					</view>
				</tn-list-cell>
				<tn-popup v-model="nianlingshow" width="80%" height="300rpx" mode="center" :borderRadius="30" :closeBtn="true"
					:maskCloseable="false">
				
					<view style="height: 100rpx;">				
					</view>
					<view class="tn-margin">
					<cj-slider v-model="nianlinglist" :min="0" :max="60" :step="1" :blockWidth="60"
					           @end="blockEnd"/>
					</view>
					<view class="tn-flex ">
						<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							<tn-button :blockRepeatClick="true" @click="nianlingshow=false;blockEnd()"
								backgroundColor="tn-main-gradient-purple" padding="40rpx 0" width="60%" shadow fontBold>
								<text class="tn-icon-edit tn-padding-right-xs "></text>
								<text class="">完成</text>
							</tn-button>
						</view>
					</view>
				</tn-popup>	
				
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="sexshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">性别</view>
						<view class="tn-color-gray " >
							<tn-select v-model="sexshow" mode="single" :list="sexlist"
								@confirm="confirmsex"></tn-select>
							<text>{{sextitle}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="shengaoshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">身高</view>
						<view class="tn-color-gray " >						
							<text>{{shengaotitle}}cm</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				
				
				<tn-popup v-model="shengaoshow" width="80%" height="300rpx" mode="center" :borderRadius="30" :closeBtn="true"
					:maskCloseable="false">
				
					<view style="height: 100rpx;">				
					</view>
					<view class="tn-margin">
					<cj-slider v-model="shengaolist" :min="120" :max="220" :step="1" :blockWidth="60"
					           @end="blockEndgao"/>
					</view>
					<view class="tn-flex ">
						<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							<tn-button :blockRepeatClick="true" @click="shengaoshow=false;blockEndgao()"
								backgroundColor="tn-main-gradient-purple" padding="40rpx 0" width="60%" shadow fontBold>
								
								<text class="">完成</text>
							</tn-button>
						</view>
					</view>
				</tn-popup>	
				
				
				
				
				
				
				
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="tzshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">体重</view>
						<view class="tn-color-gray " >						
							<text>{{zhongtitle}}Kg</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				
				<tn-popup v-model="tzshow" width="80%" height="300rpx" mode="center" :borderRadius="30" :closeBtn="true"
					:maskCloseable="false">
				
					<view style="height: 100rpx;">				
					</view>
					<view class="tn-margin">
					<cj-slider v-model="zhonglist" :min="30" :max="100" :step="1" :blockWidth="60"
					           @end="blockEndzhong"/>
					</view>
					<view class="tn-flex ">
						<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							<tn-button :blockRepeatClick="true" @click="tzshow=false;blockEndzhong()"
								backgroundColor="tn-main-gradient-purple" padding="40rpx 0" width="60%" shadow fontBold>
								
								<text class="">完成</text>
							</tn-button>
						</view>
					</view>
				</tn-popup>	
				
				
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" >
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">居住地</view>
						<view class="tn-color-gray ">
							<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
								{{new_city}} <text class="tn-icon-right"></text>
							</pick-regions>

						</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" >
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">家乡</view>
						<view class="tn-color-gray ">
							<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegionold">
								{{old_city}} <text class="tn-icon-right"></text>
							</pick-regions>

						</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="hunshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">婚姻状况</view>
						<view class="tn-color-gray " >
							<tn-select v-model="hunshow" mode="single" :list="hunlist"
								@confirm="confirmhun"></tn-select>
							<text>{{hun}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="carshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">车辆</view>
						<view class="tn-color-gray " >
							<tn-select v-model="carshow" mode="single" :list="carlist"
								@confirm="confirmcar"></tn-select>
							<text>{{car}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="homeshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">住房</view>
						<view class="tn-color-gray " >
							<tn-select v-model="homeshow" mode="single" :list="homelist"
								@confirm="confirmhome"></tn-select>
							<text>{{home}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="xuelishow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">教育及工作资料</view>
						<view class="tn-color-gray " >
							<tn-select v-model="xuelishow" mode="single" :list="xuelilist"
								@confirm="confirmxueli"></tn-select>
							<text>{{xueli}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>		
		
		
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="shourushow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">年收入</view>
						<view class="tn-color-gray " >
							<tn-select v-model="shourushow" mode="single" :list="shourulist"
								@confirm="confirmshouru"></tn-select>
							<text>{{shouru}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>									
									
						<view class="tn-flex ">
							<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
								<tn-button :blockRepeatClick="true" @click="chognzhi()"
									backgroundColor="#E6E6E6" padding="40rpx 0" width="60%" shadow fontBold>
									
									<text class="">重置</text>
								</tn-button>
							</view>
							<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
								<tn-button :blockRepeatClick="true" @click="sousuo(0)"
									backgroundColor="tn-main-gradient-purple" padding="40rpx 0" width="60%" shadow fontBold>
									
									<text class="">搜索</text>
								</tn-button>
							</view>
						</view>			
									
									
			</view>

		</view>



	</view>
</template>

<script>
	    import cjSlider from '@/homeMixinPages/jxs-slider/jxs-slider.vue'
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import {
		host
	} from '@/siteinfo.js'

export default {
		components: {
			cjSlider
		},
		data() {
			return {
				nianlingshow:false,
				nianlingtitle:'不限制',
				nianlinglist: [18, 40], 
				
				
				carshow:false,
				car:'不限制',
				carlist: [{
						value: '1',
						label: '已买车'
					},
					{
						value: '2',
						label: '未买车'
					}
				],
				
				homeshow:false,
				home:'不限制',
				homelist: [{
						value: '1',
						label: '租房'
					},
					{
						value: '2',
						label: '已买房'
					},
					{
						value: '3',
						label: '和父母同住'
					},
					{
						value: '4',
						label: '婚后买房'
					}
				],
				
				
				shengaotitle:'不限制',
				shengaolist: [140,180], 
				shengaoshow: false,
				
				zhongtitle:'不限制',
				zhonglist: [40,80], 
				tzshow: false,
				new_city:'不限制',
				old_city:'不限制',
				shouru:'不限制',
				xueli:'不限制',
				sextitle: '不限制',
			
				defaultRegion: ['陕西省', '商洛市', '洛南县'],
				defaultRegionCode: '611021',
			
			
				
				
				sexshow: false,			
				sexlist: [{
						value: '0',
						label: '不限制'
					},{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				],
				hunshow: false,
				hun:'不限制',
				hunlist: [{
						value: '1',
						label: '未婚'
					},
					{
						value: '2',
						label: '离异'
					},
					{
						value: '2',
						label: '丧偶'
					}
				],
				xuelishow: false,
				xuelilist: [{					
						label: '高中及以下'
					},
					{					
						label: '专科'
					},
					{				
						label: '本科'
					},
					{				
						label: '硕士'
					},
					{				
						label: '博士'
					}
				],
				shourushow: false,
				shourulist: [{					
						label: '5万以下'
					},
					{					
						label: '5-8万'
					},
					{				
						label: '8-10万'
					},
					{				
						label: '10-15万'
					},
					{				
						label: '15-20万'
					},
					{				
						label: '20-30万'
					},
					{				
						label: '30-50万'
					},
					{				
						label: '50万以上'
					}
				],				
				date: '请选择生日',
				nickname: '',
				nameshow: false,
				currentSize: 0,
				news: [],
				body: [],
				giftianchu: false,
				searchKey:''
			}
		},
		computed: {
			startDate() {
				return '1965-01-01';
			},
			endDate() {
				return '2005-01-01';
			}
		},
		onLoad(option) {
			let that = this

		},
		methods: {
			chognzhi(){
				this.nianlingtitle='不限制'			
				this.shengaotitle='不限制'
				this.zhongtitle='不限制'			
				this.new_city='不限制'
				this.old_city='不限制'
				this.hun='不限制'
				this.shouru='不限制'
				this.xueli='不限制'
				this.sextitle='不限制'
			},
			blockEnd() {
				this.nianlingtitle=this.nianlinglist[0]+'-'+this.nianlinglist[1]			
			 },
			 blockEndgao() {
				this.shengaotitle=this.shengaolist[0]+'-'+this.shengaolist[1]			
			 },
			 blockEndzhong() {
			this.zhongtitle=this.zhonglist[0]+'-'+this.zhonglist[1]			 			
			 },
			 
			handleGetRegion(region) {
				let new_city = region[0].name + '-' + region[1].name
				this.new_city= new_city

			},
			handleGetRegionold(region) {
				let new_city = region[0].name + '-' + region[1].name
			
				this.old_city= new_city
			},

		
			confirmshouru(e) {
				this.shourushow = false
				this.shouru=e[0].label
			},			
		
			confirmsex(e) {
				this.sexshow = false
				this.sextitle=e[0].label
			},		
			confirmhun(e) {
				this.hunshow = false
				this.hun=e[0].label
			},	
			confirmcar(e) {
				this.carshow = false
				this.car=e[0].label
			},
			confirmhome(e) {
				this.homeshow = false
				this.home=e[0].label
			},
			
			
			
			confirmxueli(e) {
				this.xuelishow = false
				this.xueli=e[0].label
			},			
		
			sousuo_id(){
				if (!this.searchKey){
					this.msg('请输入id或者昵称')
					return
				}
				this.sousuo(1)
			},
			
			sousuo(key){	
				if (key){
					let data={"nickname":this.searchKey}	
					let keyword = encodeURIComponent(JSON.stringify(data));	  
				  uni.navigateTo({	
					url:'/pages/tabbar/soulist?nickname='+keyword
				  })
			  }else{
				  let data={
					  "nianlingtitle":this.nianlingtitle,
					 "shengaotitle":this.shengaotitle,
					 "zhongtitle":this.zhongtitle,			
					 "new_city":this.new_city,
					 "old_city":this.old_city,
					"hun":this.hun,
					"car":this.car,
					"home":this.home,
					 "shouru":this.shouru,
					 "xueli":this.xueli,
					"sextitle":this.sextitle,	
					  }	
				let keyword = encodeURIComponent(JSON.stringify(data));
				uni.navigateTo({
				url:'/pages/tabbar/soulist?keyword='+keyword
				})  
			  }
			  
			},
			


		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {}

	/* 用户头像 start */
	.logo-image {
		width: 210rpx;
		height: 210rpx;
		position: relative;
	}

	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 50rpx 50rpx 50rpx rgba(0, 0, 0, 0.07);
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 8rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	.bg-flex-shadow {
		background-color: #00C3FF;
		z-index: 9999;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	.tn-shadow-blurddd {
		border: 2px solid black;
	}

	.list {
		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 18rpx;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.list-icon-text,
	.list-image-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list-image-text {
		.list {
			&__left {
				&__image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}

	/* 标签内容 end*/
</style>